<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>goods</title>
	<style>
		.mag {
			width: 450px;
			height: 450px;
			border: 1px solid #ccc;
		}
		ul {
			list-style: none;
			padding: 0 40px;
			margin: 0;
		}
		.small li {
			float: left;
			margin: 20px 0 0 20px;
		}
	</style>
</head>
<body>
	<div>
		<div class = "mag">
			<img src="01b.jpg" alt="">
		</div>
		<div class = "small">
			<ul>
				<li>
					<a href="#">
						<img src="01s.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="02s.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="03s.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="04s.jpg" alt="">
					</a>
				</li>
			</ul>
		</div>
	</div>

	<script src="jquery-3.3.1.min.js"></script>
	<script>
		var lis=$('li');
		var imbig=$('.mag>img');
		for (var i = 0; i < $(lis).length; i++) {
			lis[i].index=i+1;
			$(lis[i]).click(function(){
				imbig.attr("src",'0'+this.index+'b.jpg');
			})
		}





	</script>
</body>
</html>